<template>
  <div class="ping-banner">
    <div class="size">
      <span>尺码感受</span>
      <span>86%觉得尺码合适</span>
    </div>
    <div class="size2">
      <div class="small">偏小 <span></span> <span>1人 (4%)</span></div>
      <div class="comfortable">合适 <span></span> <span>18人 (86%)</span></div>
      <div class="big">偏大 <span></span> <span>2人 (10%)</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PingBanner",
};
</script>

<style scoped>
.ping-banner {
  height: 1.4rem;
  border-bottom: 7px solid #f3f2f6;
}
.size {
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.size span:nth-child(1) {
  font-size: 0.16rem;
  font-weight: bold;
}
.size span:nth-child(2) {
  margin-left: 1.5rem;
  font-size: 0.14rem;
  color: #9e9cac;
}
.size2 {
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.size2 div{
  margin-top: 0.1rem;
}
.small span:nth-child(1) {
  margin-left: .2rem;
  display: inline-block;
  width: .12rem;
  height: .04rem;
  background-color: #cbf3f9;
}
.comfortable span:nth-child(1) {
  margin-left: .2rem;
  display: inline-block;
  width: 2rem;
  height: .04rem;
  background-color: #00bec3;
}
.big span:nth-child(1) {
  margin-left: .2rem;
  display: inline-block;
  width: .2rem;
  height: .04rem;
  background-color: #cbf3f9;
}
</style>